<template>
    <div class="channel" @scroll="console.log(event)">
        <van-tabs color="#fb7299" title-active-color='#fb7299' v-model="currentIndex">
            <van-tab title="推荐" :to="path"></van-tab>
            <van-tab  v-for="(item, index) in channel.child"
                :key="index"
                :title="item.name"
                :to='{path:path+"/"+item.rid}' >
                <div slot="title">
                    {{item.name}}
                </div>
            </van-tab>
        </van-tabs>
        <block v-show='$route.path==path' :index='path'>
            
            <ChannelSection :section='hotSection' :num='4' ></ChannelSection>
            <ChannelSection v-for="(item,index) in channel.child" :section='item' :num='4' :key='index'></ChannelSection>
            
        </block>
        <block else>
            <keep-alive>
                <router-view :key="$route.params.rid"></router-view>
            </keep-alive>
        </block>
        
    </div>
</template>

<script>
import ChannelSection from '../components/common/ChannelSection'
export default {
    components:{
        // "ChannelSection":resolve=>(['../components/common/ChannelSection'],resolve)
        ChannelSection
    },
    data(){
        return{
            hotSection:{},
            currentIndex:0,
            // query:this.$route.params.channel,
            channel:this.$categorys.filter((res)=>{return res.rid==this.$route.params.id})[0],
            path:this.$route.path
        }
    },
    watch:{
        // $route(){
        //     this.channel=this.$categorys.filter((res)=>{return res.rid==this.$route.params.id})[0]
        //     this.sethotSection()
        //     console.log(this.$route.params)
        // }
    },
    methods:{
        sethotSection(){
            let {rid}=this.channel
            let name='热门推荐'
            this.hotSection={rid,name}
        }
    },
    created(){
        this.sethotSection()
        console.log(this.channel)
    }
}
</script>

<style>

.channel .van-tabs--line .van-tabs__wrap{
  height: 3rem !important;
  border-bottom: 0.5px solid rgb(240, 240, 240);
}
.channel .van-tab{
  font-size: 1.18rem !important;
  padding: 0 1.3rem  !important;
  flex:none;
}
.channel .van-tabs__nav::-webkit-scrollbar{
    display: none;
}
.channel .van-tabs__nav{
  padding-bottom: 1rem;
  overflow-x:auto ;
  overflow-y: hidden;
}
.channel .van-tabs__line{
  left: 0 !important;
  z-index: 1 !important;
  width: 2.5rem !important;
  border-radius: 0.075rem !important;
  height: 0.15rem !important;
  min-height: 2px !important;
  bottom: 1rem;
}
.channel .van-tabs__wrap--scrollable {
  padding: 0 !important;
}
</style>